@charset "utf-8";
@mixin mi($width,$height,$bg){
    width: $width;
    height: $height;
    background: $bg;    
}
@mixin size($width,$height){
    width: $width;
    height: $height;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
body{
    min-width:1280px;
    background: #f6f6f6;
}
#web{
    width: 100%;
header{
     width: 100%;
     background: white;
       .top{@include mi(100%,40px,#dfdfde);
           .main{
               width: 995px;
                margin: 0 auto;
                a{
                    font-size:14px;
                    color: #000000;
                    margin-left: 25px;
                }
            }
            
        }
        nav{
            @include mi(995px,96px,white);
             margin: 0 auto;
        .logo{
            display: inline-block;
            @include size(304px,94px);
        img{
            @include size(100%,100%);
        }
        
    }
         ul{
            width: 605px;
            li{
                float: left;
                @include size(85px,96px);
                text-align: center;
                line-height: 24px;
                padding-top: 28px;
                box-sizing: border-box;
                a{
                    color: #000000;
            }
        }
            .active{
                background: #faf8f8;
                border-bottom: 3px solid #3c9cd3;
            }
            li:hover{
                background: #faf8f8;
                border-bottom: 3px solid #3c9cd3;
    }
    }
    }
    }



/**/
.carou{
    width:100%;
    position: relative;
    
    img{
        width: 100%;
    }
    .yidian{
        display: block;
        position: absolute;
        margin-top:-40px;
        width: 500px;
        height: 50px;
        left: 45%;
        li{
            float: left;
            height:15px;
            width: 15px;
            margin-left:20px;
            border-radius: 50%;
            background: skyblue;
        }
    }
}

/**/
.product{
      margin: 0 auto;
      margin-top:40px;
      @include size(996px,506px);
      position: relative;
      .div1{
          @include mi(315px,473px,white);
          margin-left: 30px;
          .border{
              @include mi(100%,167px,#2395cb);
              position: relative;
              .xinwen{
                  @include size(100%,168px);
                  text-align: center;
                  p{
                     font-size: 14px;
                     line-height: 33px;
                     color: white; 
                  }
                  .hr{
                      margin: 0 auto;
                      width: 106px;
                      border-bottom: 1px solid #FFFFFF ;
                  }
              }
              hr{
                  display: block;
                  width: 90%;
                  margin: 0 auto;
                  border: 1px dashed #dcdcdc;
                  margin-top: 40px;
              }
              .img{
                 margin: 0 auto;
                 @include size(54px,54px);
                 padding-top: 8px;  
              }
              ul{
                  margin-top: 20px;
               li{
                  list-style: disc;
                  color: #2395cb;
                  margin-left: 32px;
                  a{
                        font-size: 14px;
                        line-height: 24px;
                        color: black;
                  }
              }
             }
             .ce{
                @include size(100%,157px);
                .ce-left{
                        margin-top: 20px;
                        @include size(50%,157px);
                         h1{
                         font-size: 16px;
                         line-height: 24px;
                         margin-bottom:16px;
                         margin-left: 13px;
                        }
                        .ce-img{
                            @include size(132px,100px);
                            margin-left: 13px;
                            }
                        }
                .ce-right{
                         margin-top:20px;
                         @include size(50%,157px);
                        .ce-right-font{
                         margin-top: 39px;
                         font-size: 14px;
                         line-height: 26px;
        }
    }
} 
            }              
          .border::after{
              position: absolute;
              bottom: -21px;
              left: 50%;
              margin-left: -21px;
              content: "";
              display: block;
              border-top: 21px solid #2395cb;
              border-left: 21px solid transparent;
              border-right: 21px solid transparent;
          }
      }
       .div2{
            display: block;
            @include mi(315px,473px,white);
            position: absolute;
            top:0;
            left: 35%;
            margin: 0 8px;
            .div2-head{
                    @include mi(100%,168px, #3ed1a4);
                    text-align: center;
                    position: relative;
                    .div2-img{
                        @include size(54px,54px);
                        margin:0 auto;
                        padding-top:8px;
                        }
                        p{
                        font-size:14px;
                        line-height:33px;
                        color: white;
                        }
                        .hr{
                          margin: 0 auto;
                          width: 106px;
                          border-bottom: 1px solid #FFFFFF ;
                        }
                    }
            .div2-head::after{
                    position: absolute;
                    bottom: -21px;
                    left: 50%;
                    margin-left: -21px;
                    content: "";
                    display: block;
                    border-top: 21px solid #3ed1a4;
                    border-left: 21px solid transparent;
                    border-right: 21px solid transparent;
                    }
            .div2-chanpin{
                     margin: 0 auto;
                     margin-top: 50px;
                     position: relative;
                     @include size(280px,180px);
                     img{
                         width: 280px;
                         height: 180px;
                     }
                    span{
                    img{
                         @include size(18px,27px);
                        }
                        }
                    .span1{
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        margin-left: -18px;
                        }
                    .span2{
                         display: block;
                         position: absolute;
                         right: 0;
                         top: 50%;
                        margin-right:-18px;
                    }
                    }    
            .div2-font{
                     margin-top:4px;
                     text-align: center;
                     h1{
                        font-size: 16px;
                        line-height: 34px;
                        color: #2395cb;
                        }
                    p{
                        font-size: 12px;
                         line-height: 21px; 
                    }
                    }  
        }
        .div3{
             @include mi(315px,473px,white);
             position: absolute;
             top: 0;
             right: 0;
            .div3-head{
                    @include mi(100%,168px,#895ea3);
                    text-align: center;
                    position: relative;
                    p{
                    font-size: 14px;
                    line-height:33px;
                    color: white;  
                    }
                    .hr{
                        margin: 0 auto;
                        width: 106px;
                        border-bottom: 1px solid #FFFFFF ;
                    }
                    .div3-headimg{
                        @include size(54px,54px);
                        margin:0 auto;
                        padding-top:8px;
                    }
                }
            .div3-head::after{
                    position: absolute;
                    bottom: -21px;
                    left: 50%;
                    margin-left: -21px;
                    content: "";
                    display: block;
                    border-top: 21px solid #895ea3;
                    border-left: 21px solid transparent;
                    border-right: 21px solid transparent;
                 }
            .div3-jiaoshao{
                    @include size(280px,180px);
                    margin: 0 auto;
                    margin-top:50px;
                    img{
                        width: 100%;
                        }
                    }
            .div3-font{
                    position: relative;
                    width: 280px;
                    margin: 0 auto;
                    p{
                        margin-left: 50px;
                        font-size: 10px;
                        line-height: 22px;
                    }
                    span{
                        font-size: 30px;
                        opacity: 0.3;
                     }
                    .div3-1{
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    .div3-2{
                        display: block;
                        position: absolute;
                        buttom: 0;
                        right: 0;
                    }
            }
        }
              
    }

}


/**/
.about{
    @include size(100%,500px);
    margin: 0 auto;
    .we{
        @include mi(100%,156px,#f6f6f6);
        margin:0 auto;
        position: relative;
        .we-font{
            @include mi(100px,50px,#f6f6f6);
            display: block;
            position: absolute;
            margin: 0 auto;
            margin-top:px;
            left: 46%;
            margin-top:20px;
            h1{
                text-align: center;
                font-size: 18px;
                line-height: 31px;
            }
            p{
                text-align: center;
                font-size: 12px;
                color: #c8c8c8;
            }
        }
        hr{
            display: block;
            position: absolute;
            left: 40%;
            top: 25%;
            width: 20%;
            color: #c8c8c8;
            margin-top: 20px;
        }
    }
    .about-jianjie{
        @include size(100%,344px);
        position: relative;
        .about-img2{
            @include size(100%,344px);
            position: relative;
            img{
                width: 100%;
            }
        }
        .about-font{
            @include size(1010px,135px);
            display: block;
            position: absolute;
            top: 39px;
            left: 15%;
            text-align: center;
            p{
               font-size: 14px;
               line-height: 24px;
            }
        }
        .about-ul{
            @include size(1047px,167px);
            position: absolute;
            top: 126px;
            left: 176px;
            li{
                @include size(281px,159px);
                float: left;
                margin-top: 3px;
                img{
                    width: 100%;
                }
            }
            
            li:nth-child(2){
                margin-left: 20px;
                margin-right: 20px;
            }
            li:nth-child(4){
                margin-left: 20px;
                margin-right: 20px;
            }
            
        }
    }
}
/**/
.contact{
    @include mi(100%,41px,#f6f6f6);
    position: relative;
    margin-top: 30px;
    .contact-font{
        @include mi(106px,63px,#f6f6f6);
        display: block;
        position: absolute;
        left: 46%;
        top:-38px;
        h1{
            text-align: center;
            font-size: 18px;
            line-height: 31px;
        }
        p{
           text-align: center;
           font-size: 12px;
           color: #c8c8c8; 
        }
    }
    .contact-hr{
        hr{
            width:300px;
            color: #c9c9c9;
            margin: 0 auto;
        }
    }
}
.footer{
    @include mi(100%,539px,white);
    footer{
        @include size(1047px,539px);
        margin: 0 auto;
        margin-left: 176px;
        .footer-left{
            @include size(40%,539px);
            .erwei-left{
                @include size(126px,125px);
                margin-top: 50px;
                img{
                    @include size(126px,125px);
                }
                p{
                   font-size: 12px;
                   line-height: 20px;
                   text-align: center; 
                }
            }
            .lian-right{
                    @include size(263px,240px);
                    margin-top: 50px;
                    li{
                        font-size: 14px;
                        list-style: none;
                        height:30px;
                        a{
                        font-size: 14px;
                        line-height: 14px;
                        color: black;
                            img{
                                @include size(17px,19px);
                                } 
                        }
                }
            }
            .buttom{
                @include size(430px,196px);
                img{
                    @include size(430px,196px);
                }
            }
        }
        .footer-right{
            @include size(60%,539px);
            margin-right: -11px;
            .form{
                @include size(613px,539px);
                margin-top: 50px;
                float: right;
                p{
                    font-size: 16px;
                    line-height: 21px;
                    margin-bottom:5px;
                }
                input{
                    @include size(603px,33px);
                    margin-bottom: 20px;
                    border: 1px dashed;
                }
                textarea{
                    @include size(603px,119px);
                    margin-bottom: 10px;
                    border: 1px dashed;
                    resize: none;
                }
                input[type="submit"]{
                    @include mi(93px,28px,#3c9cd3);
                }
            }
        }
        }
        
        
    }
.address{
    @include mi(100%px,104px,#3c9cd3);
    position: relative;
    .guanzhu{
            @include size(300px,21px);
            color: white;
            display: block;
            position: absolute;
            top:20%;
            left:40%;
           
            img{
                margin-right: 26px;
                @include size(25px,21px);
            }
            
        }
       .address-ul{
            margin: 0 auto;
            @include size(500px,30px);
            padding-top:60px;
   
            li{
                @include size(70px,30px);
                float: left;
                list-style: none;
                color: white;
                padding-right:10px ;
                a{
                    font-size: 14px;
                    line-height: 14px;
                    color: white;
                }
            }
            li:first-child{
                list-style: none;
            }
        }
}
.cc{
    @include mi(100%,35px,#1c1b29);
    p{
        text-align: center;
        color: white;   
        font-size: 14px;
        line-height: 35px;
        }
}